<template>
  <div class="app-container">
    <div class="search-bar p-10">
      <el-form ref="formRef" :model="formData" :rules="rules">
        <el-form-item :label="$t('smtp.serviceName')" prop="serviceName">
          <el-input
            ref="serviceName"
            v-model="formData.serviceName"
            size="large"
            name="serviceName"
          />
        </el-form-item>
        <el-form-item :label="$t('smtp.serviceMail')" prop="serviceMail">
          <el-input
            ref="serviceMail"
            v-model="formData.serviceMail"
            size="large"
            name="serviceMail"
          />
        </el-form-item>
        <el-form-item :label="$t('smtp.host')" prop="host">
          <el-input ref="host" v-model="formData.host" size="large" name="host" />
        </el-form-item>
        <el-form-item :label="$t('smtp.port')" prop="port">
          <el-input
            ref="port"
            v-model.number="formData.port"
            size="large"
            type="number"
            name="port"
          />
        </el-form-item>
        <el-form-item :label="$t('smtp.username')" prop="username">
          <el-input ref="username" v-model="formData.username" size="large" name="username" />
        </el-form-item>
        <el-form-item :label="$t('smtp.password')" prop="password">
          <el-input ref="password" v-model="formData.password" size="large" name="password" />
        </el-form-item>
        <el-form-item :label="$t('smtp.fromEmail')" prop="fromEmail">
          <el-input ref="fromEmail" v-model="formData.fromEmail" size="large" name="fromEmail" />
        </el-form-item>
        <el-form-item :label="$t('smtp.auth')" prop="auth">
          <el-switch
            v-model="formData.auth"
            size="large"
            inline-prompt
            :active-text="$t('smtp.authSwitch.1')"
            :inactive-text="$t('smtp.authSwitch.0')"
          />
        </el-form-item>

        <el-form-item :label="$t('smtp.startsslEnable')" prop="startsslEnable">
          <el-switch
            v-model="formData.startsslEnable"
            size="large"
            inline-prompt
            :active-text="$t('smtp.authSwitch.1')"
            :inactive-text="$t('smtp.authSwitch.0')"
          />
        </el-form-item>
        <el-form-item :label="$t('smtp.starttlsEnable')" prop="starttlsEnable">
          <el-switch
            v-model="formData.starttlsEnable"
            size="large"
            inline-prompt
            :active-text="$t('smtp.authSwitch.1')"
            :inactive-text="$t('smtp.authSwitch.0')"
          />
        </el-form-item>
        <el-button :loading="loading" type="primary" class="w-auto" @click.prevent="submitForm">
          {{ $t("common.submit") }}
        </el-button>
        <el-tooltip class="box-item" effect="dark" :content="$t('smtp.testTip')" placement="right">
          <el-button
            v-if="formData.host != ''"
            :loading="loading"
            type="success"
            @click.prevent="testSmtp"
          >
            {{ $t("smtp.test") }}
          </el-button>
        </el-tooltip>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useI18n } from "vue-i18n";
import { ref } from "vue";
import API, { SmtpForm } from "@/api/system/smtp";

const { t } = useI18n();
const formRef = ref(ElForm);
const loading = ref(false);
const labelWidth = ref(120);

const formData = reactive<SmtpForm>({
  host: "",
  port: 0,
  username: "",
  password: "",
  fromEmail: "",
  auth: false,
  starttlsEnable: false,
  startsslEnable: false,
  serviceName: "",
  serviceMail: "",
});

const rules = computed(() => {
  return {
    host: [
      {
        required: true,
        message: t("common.plsInput") + t("smtp.host"),
        trigger: "blur",
      },
    ],
    port: [
      {
        required: true,
        message: t("common.plsInput") + t("smtp.port"),
        trigger: "blur",
      },
    ],
    username: [
      {
        required: true,
        message: t("common.plsInput") + t("smtp.username"),
        trigger: "blur",
      },
    ],
    password: [
      {
        required: true,
        message: t("common.plsInput") + t("smtp.password"),
        trigger: "blur",
      },
    ],
    fromEmail: [
      {
        required: true,
        message: t("common.plsInput") + t("smtp.fromEmail"),
        trigger: "blur",
      },
    ],
  };
});

async function submitForm() {
  formRef.value.validate((valid: boolean) => {
    if (valid) {
      loading.value = true;
      API.update(formData)
        .then((res) => {
          if (res.data.code === 200) {
            ElMessage.success(res.data.message);
            loading.value = false;
          } else {
            ElMessage.error(res.data.message);
          }
        })
        .finally(() => (loading.value = false));
    }
  });
}

function testSmtp() {
  loading.value = true;
  API.testSmtp(formData.fromEmail)
    .then((res) => {
      if (res.data.code === 200) {
        ElMessage.success(res.data.message);
        loading.value = false;
      } else {
        ElMessage.error(res.data.message);
      }
    })
    .finally(() => (loading.value = false));
}

function getSmtp() {
  API.getFormData().then((res) => {
    Object.assign(formData, res);
  });
}

onMounted(() => {
  getSmtp();
});
</script>
